<template>
  <div class="view remind">
    <!-- 未开通会员弹窗 -->
    <div class="layer" v-if="openMember">
      <div class="layer-content">
        <i class="iconfont icon-huiyuantequan1"></i>
        <p class="font-size: 24px;">{{ $t('ndxStake.joinVipEnjoy') }}</p>
        <p>{{ $t('ndxStake.goodService') }}</p>
        <div class="open-member-btn" @click="$router.push('/member');">
          <span>{{ $t('ndxStake.openMember1') }}</span>
        </div>
        <i class="iconfont icon-jiaoyitingzhi" @click="openMember = false"></i>
      </div>
    </div>
    <div class="remind-main">
      <div class="remind-banner flexb">
        <div>
          <span class="memberSevice">{{ $t('ndxStake.memberSevice') }}</span>
            {{ $t('ndxStake.upgradeVip') }}!
        </div>
        <span class="joinBtn fr" @click="$router.push('/member')">{{ $t('ndxStake.openMember3') }}</span>
      </div>
      <div class="unifiedEmail flexb">
        <div>{{ $t('ndxStake.allEmailTip') }}</div>
        <div>
          <!-- 已绑定 -->
          <div v-if="user && user.email" class="fr">
            <span class="remind-email" style="font-size: 15px;">{{user.email}}</span>
            <span class="email-change" @click="handleToDetails('email')">{{ $t('ndxStake.change') }}</span>
          </div>
          <!-- 未绑定 -->
          <div v-else
            class="blueColor user-info fr"
            @click="handleToDetails('email')">
            {{ $t('ndxStake.setEmail') }}
          </div>
        </div>
      </div>
      <!-- 成交提醒 -->
      <div class="remind-caption borderNone" style="margin-top: 0px;">
        <div class="flex">
          <div class="remind-left">
            {{ $t('ndxStake.remind') }}
          </div>
          <div class="remind-center">
            {{ $t('ndxStake.remindTip') }}
          </div>
          <div class="remind-right">
            <!-- 开关 -->
            <el-switch
              v-model="user.isDealRemind"
              @change="handleSwitch"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
              class="fr">
            </el-switch>
          </div>
        </div>
        <!-- 全部/部分成交显示 -->
        <div class="email-tip flexb" v-if="user.isDealRemind">
          <div :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'line-height: 20px;' : ''">
            <span>{{ $t('ndxStake.afterOrder') }}</span>
            <span
              class="numberNone"
              v-if="!user.remainDealRemindCount"
              :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'display: block' : ''">
                ( {{ $t('ndxStake.remindNumberNone') }} )
              </span>
          </div>
          <div>
            <el-checkbox v-model="user.noRemindPartial"
            :true-label="1"
            :false-label="0"
            @change="handleSwitch('', 'tip')">{{ $t('ndxStake.noRemindPartial') }}</el-checkbox>
          </div>
        </div>
      </div>
      <!-- 行情提醒 -->
      <div class="remind-caption quotation-remind">
        <div class="flex">
          <div class="remind-left">
            {{ $t('ndxStake.marketRemind') }}
          </div>
          <div class="remind-center">
            {{ $t('ndxStake.marketRemindTip') }}
          </div>
          <div class="remind-right">
            <div>
              <span>{{ $t('ndxStake.openNumber',
                {number: $store.state.app.accountInfo ? $store.state.app.accountInfo.usedMarketRemindCount : 0}) }}
              </span>
              <span class="quotationAdmin" @click="handleToDetails('quotation')">{{ $t('ndxStake.admin') }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 盈亏统计 -->
      <div class="remind-caption flex quotation-remind">
        <div class="remind-left">
          {{ $t('ndxStake.positionStatistics') }}
        </div>
        <div class="remind-center">
          {{ $t('ndxStake.positionStatisticsTip') }}
        </div>
        <div class="remind-right">
          <div>
            <span class="quotationAdmin" @click="handleToDetails('profits')">{{ $t('ndxStake.admin') }}</span>
          </div>
        </div>
      </div>
      <!-- 匿名交易 -->
      <div class="remind-caption flex">
        <div class="remind-left">
          {{ $t('ndxStake.namelessTrading') }}
        </div>
        <div class="remind-center">
          {{ $t('ndxStake.hideAccoutName') }}
        </div>
        <div class="remind-right">
          <div class="remind-right">
            <!-- 匿名交易开关 -->
            <el-switch
              v-model="user.anonymous"
              @change="handleAnonymousSwitch"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
              class="fr">
            </el-switch>
          </div>
        </div>
      </div>
      <!-- 免费CPU -->
      <div class="remind-caption flex borderBottom quotation-remind hidden" v-if="$store.state.app.scatter.chain === 'eos'">
        <div class="remind-left">
          {{ $t('ndxStake.freeCpu') }}
        </div>
        <div class="remind-center">
          {{ $t('ndxStake.claimFreeCpuTip') }}
        </div>
        <div class="remind-right">
          <div>
            <span v-if="user && user.freeCpuStatus">
              <span>
                {{ $t('ndxStake.claimedValid', {day: (user && user.freeCpuExpireDays) || 0}) }}
              </span>
              <el-tooltip placement="bottom" effect="light">
                <div slot="content" class="volatilityContent">
                  <p>{{ $t('ndxStake.cpuResourcesTip') }}</p>
                </div>
                <span class="volatility">
                  <i class="iconfont icon-jiaoyizanting"></i>
                </span>
              </el-tooltip>
            </span>
            <span v-else>{{ $t('ndxStake.cpuAvailable', {day: (user && user.availableCpuQuantity) || 0}) }}</span>
            <span class="quotationAdmin" @click="handleToDetails('getCpu')">{{ $t('ndxStake.admin') }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { authorized } from '@/utils/validate';

export default {
  name: 'Remind', // 用户设置 - 交易通知
  data() {
    return {
      openMember: false, // 非会员弹窗
      user: {
        account: this.$store.state.app.scatter.identity.accounts[0].name,
        chain: this.$store.state.app.scatter.chain,
        discountRate: 1,
        anonymous: 0,
        email: '',
        isDealRemind: 0, // 成交提醒开启按钮值
        isMarketRemind: 0,
        language: this.$store.state.app.language,
        level: 0,
        maxLevel: 10,
        ndxStaked: 0,
        noRemindPartial: 0, // 部分成交
        remainDealRemindCount: 10,
        remainDrawCount: 0,
        remainMarketRemindCount: 5,
        totalSaveAmount: 0,
        usedMarketRemindCount: 0,
        vipImageUrl: null,
        vipMode: 0,
        weight: 0,
        weightRatio: 0,
        freeCpuExpireDays: 0, // 领取CPU到期天数
        freeCpuExpireTime: 0, // 领取CPU失效时间
        freeCpuStatus: 0, // 领取CPU状态：0-可领取；1-已领取
        availableCpuQuantity: 0, // 可领取CPU数量
      }, // 会员信息
      remindEdit: false, // 行情提醒管理显示
      isclick: false, // 避免成交提醒一直点击
    }
  },
  components: {
  },
  props: {
  },
  watch: {
    // 监听账户等级变化
    '$store.state.app.accountInfo': function change(val) {
      this.user = val || {};
    },
  },
  created() {
  },
  mounted() {
    this.handleGetAccountInfo();
  },
  methods: {
    // 跳转到详情页
    handleToDetails(name) {
      this.$router.push({ name });
    },
    // 成交提醒开关按钮
    handleSwitch(val, tip) {
      if (this.isclick) return;
      this.isclick = true;
      // 是会员未绑定邮箱
      if (!this.user.email) {
        this.user.isDealRemind = false;
        this.isclick = false;
        this.$message.warning(this.$t('ndxStake.noBindEmail'));
        return;
      }
      authorized(this, (code) => {
        if (code === 'error') {
          this.isclick = false;
          if (tip) {
            this.user.noRemindPartial = !this.user.noRemindPartial ? 1 : 0;
            return;
          }
          this.user.isDealRemind = !this.user.isDealRemind ? 1 : 0;
          return;
        }
        const params = {
          isDealRemind: this.user.isDealRemind,
          noRemindPartial: this.user.noRemindPartial
        };
        this.$http.post('/account/updateDealRemindConfig', params).then((res) => {
          setTimeout(() => {
            this.isclick = false;
          }, 500);
          if (res.code !== 0) {
            this.$message.error(res.msg);
            this.user.isDealRemind = !this.user.isDealRemind ? 1 : 0;
            return;
          }
          if (this.user.isDealRemind && tip) {
            this.$message.success(this.$t('ndxStake.changeSuccess'));
          } else if (this.user.isDealRemind) {
            this.$message.success(this.$t('ndxStake.alreadyOpen'));
          } else {
            this.$message.success(this.$t('ndxStake.alreadyClose'));
          }
          this.$store.dispatch('setAccountInfo', this.user);
        });
      });
    },
    // 匿名交易
    handleAnonymousSwitch() {
      if (this.isclick) return;
      this.isclick = true;
      if (this.user.level < 5) {
        this.isclick = false;
        this.user.anonymous = !this.user.anonymous;
        this.$message.warning(this.$t('ndxStake.vipLevelThan'));
        return;
      }
      authorized(this, (code) => {
        if (code === 'error') {
          this.isclick = false;
          this.user.anonymous = !this.user.anonymous ? 1 : 0;
          return;
        }
        const params = {
          isAnonymous: this.user.anonymous ? 1 : 0
        }
        this.$http.post('/account/updateAnonymousConfig', params).then((res) => {
          setTimeout(() => {
            this.isclick = false;
          }, 500);
          if (res.code !== 0) {
            this.$message.error(res.msg);
            return;
          }
          if (this.user.anonymous) {
            this.$message.success(this.$t('ndxStake.alreadyOpen'));
          } else {
            this.$message.success(this.$t('ndxStake.alreadyClose'));
          }
          // 更新vuex accountInfo 值
          this.$store.dispatch('setAccountInfo', this.user);
        });
      });
    },
    // 获取账号会员信息
    handleGetAccountInfo() {
      const scatter = this.$store.state.app.scatter;
      if (scatter && scatter.identity) {
        const params = {
          account: scatter.identity.accounts[0].name
        }
        this.$http.post('/account/getAccountInfo', params).then((res) => {
          if (res.code === 1007) {
            const info = {
              account: this.$store.state.app.scatter.identity.accounts[0].name,
              chain: this.$store.state.app.scatter.chain,
              ambassadorType: null,
              anonymous: 0,
              consumeLevel: 0,
              discountRate: 1,
              email: null,
              expireTime: null,
              isDealRemind: 0,
              isMarketRemind: 0,
              isRenew: 0,
              joinTime: null,
              language: this.$store.state.app.language,
              level: 0,
              maxLevel: 10,
              ndxStaked: 0,
              noRemindPartial: 0,
              orderTime: null,
              remainDealRemindCount: 10,
              remainDrawCount: 0,
              remainMarketRemindCount: 5,
              renewDuration: null,
              stakeLevel: 0,
              totalSaveAmount: 0,
              usedMarketRemindCount: 0,
              vipImageUrl: null,
              vipMode: 0,
              weight: 0,
              weightRatio: 0,
              remainFreeOrderCount: 1,
            }
            this.$store.dispatch('setAccountInfo', info);
          }
          if (res.code !== 0) {
            return;
          }
          if (res.code === 0) {
            this.user = res.accountInfo || {};
            this.$store.dispatch('setAccountInfo', this.user);
          }
        });
        return;
      }
      this.$store.dispatch('setAccountInfo', {});
    },
  },
}
</script>

<style scoped lang="scss">
@import '@/views/myWallet/user.scss';
@import '@/assets/css/variables.scss';
@import '@/views/myWallet/eosResource/resource.scss';

$-color: #278EDA;
$yellow: #E5BC7E;

.blueColor {
  color: $-color !important;
}

.color333 {
  color: #333 !important;
}

.borderNone {
  border: none !important;
}

.view{
  min-height: 550px;

  /deep/ .el-input-group__append {
    padding: 0 5px;
    background: $-color;
    color: #fff;
    cursor: pointer;
  }

  .layer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;

    .layer-content {
      position: absolute;
      top: 50%;
      left: 50%;
      padding-top: 34px;
      width: 450px;
      height: 275px;
      background: linear-gradient(to right, #565656, #2a2a2a);
      transform: translate(-50%, -50%);
      border-radius: 10px;
      text-align: center;

      .icon-huiyuantequan1 {
        font-size: 50px;
        color: $yellow;
      }

      p {
        color: $yellow;
      }

      p:nth-child(2) {
        font-size: 18px;
        margin: 20px 0 10px;
      }

      p:nth-child(3) {
        font-size: 14px;
      }

      .icon-jiaoyitingzhi {
        position: absolute;
        right: -20px;
        top: -20px;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
      }

      .open-member-btn {
        display: inline-block;
        padding: 9px 42px;
        background: linear-gradient(to right, #f9db8c, #f6a657);
        border-radius: 10px;
        color: #753f05;
        margin-top: 30px;
        cursor: pointer;
      }
    }
  }

  .remind-main {
    width: 1080px;
    margin: auto;
    padding: 20px;
    padding-top: 20px;

    .remind-banner {
      height: 50px;
      // background: url('../../../assets/img/member/remindBanner.png') no-repeat;
      // background-size: 100% 100%;
      color: #753F05;
      // padding-left: 30%;
      border-bottom: 1px solid rgba(117, 63, 5, 0.38);

      .memberSevice {
        margin-right: 12px;
        font-size: 18px;
      }

      .joinBtn {
        font-size: 12px;
        display: inline-block;
        background: linear-gradient(to right, #f9db8c, #f6a657);
        border-radius: 3px;
        color: #753f05;
        padding: 8px 20px;
        margin-left: 160px;
        cursor: pointer;
      }
    }

    .remind-caption {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #F7F7F7;

      .remind-left {
        flex: 1.1;
        font-size: 14px;
        color: #101010;
      }

      .remind-center {
        flex: 2;
        color: #999;
      }

      .remind-right {
        flex: 2;
        text-align: right;
        padding-right: 5px;
      }
    }

    .unifiedEmail {
      padding: 15px 0 20px;
      // border-bottom: 1px solid #F7F7F7;
      color: #999 !important;

      .user-info {
        margin-right: 5px;
        cursor: pointer;
      }

      .email-change {
        margin: 0 0 0 8px;
        color: $-color;
        cursor: pointer;
      }
    }

    .quotation-remind {
      .quotationAdmin {
        margin-left: 8px;
        color: $-color;
        cursor: pointer;
      }
    }

    .borderBottom {
      padding-bottom: 20px;
      border-bottom: 1px solid #F7F7F7;
    }

    .email-tip {
      background:#F7F7F7;
      margin-top: 10px;
      color: #333;
      line-height: 54px;
      padding: 0 20px 0 20px;

      .numberNone {
        margin-left: 5px;
        color: #EE1443;
      }
    }
  }
}
.theme-1B1D27{
  .view{
    .blur-btn{
      border-color: #4e5b85;
    }

    .bind {
      background: #152c58 !important;
    }

    .color333 {
      color: #999 !important;
    }

    .remind-left {
      color: rgba(255, 255, 255, 0.8) !important;
    }

    .email-tip {
      background: #0D1939 !important;
      color: rgba(255, 255, 255, 0.8);
    }

    .remind-banner {
      color: #E7CC8E;
      border-color: #E7CC8E;
    }

    .remind-caption {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .borderBottom {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
}
</style>
